<template>
  <view class="page-default">
    <c-nav-bar title="信息查询" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="bg-#FEF9D9">
      <view class="px-5 py-2 text-xs text-#E7B710">
        注：填写特殊体质信息之前，请先阅读<text class="text-#FC2D57" @click="popupHandle">
          《填表说明》
        </text>。
      </view>
    </view>
    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />个人信息
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form label-position="left" label-width="auto">
          <up-form-item label="姓名" :border-bottom="true">
            <view class="w-full text-right">
              谢之遥
            </view>
          </up-form-item>
          <up-form-item label="性别" :border-bottom="true">
            <view class="w-full text-right">
              女
            </view>
          </up-form-item>
          <up-form-item label="出生年月" :border-bottom="true">
            <view class="w-full text-right">
              2008-06-05
            </view>
          </up-form-item>
          <up-form-item label="身份证号" :border-bottom="true">
            <view class="w-full text-right">
              610324200808168888
            </view>
          </up-form-item>
          <up-form-item label="联系电话" :border-bottom="true">
            <view class="w-full text-right">
              18165214164
            </view>
          </up-form-item>
          <up-form-item label="家长姓名" :border-bottom="true">
            <view class="w-full text-right">
              谢小光
            </view>
          </up-form-item>
          <up-form-item label="家长电话" :border-bottom="true">
            <view class="w-full text-right">
              18165214164
            </view>
          </up-form-item>
          <up-form-item label="家庭详细地址" label-position="top" :border-bottom="false">
            <view>陕西省,西安市,长安区,西长安街254号长乐小区9号楼2单元1103室</view>
          </up-form-item>
        </up-form>
      </view>
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />特异体质情况说明
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="form1" label-position="left" label-width="auto" :model="dataForm" :rules="rules">
          <up-form-item ref="item1" required label="户籍所在地" label-position="top" :border-bottom="false" prop="name">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                特异疾病选择
                <span class="text-red-500">*</span>
              </div>
            </template>

            <up-checkbox-group v-model="checked" placement="row">
              <up-checkbox active-color="#00E0AE" label="先天性心脏病" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="癫痫" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="哮喘" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="过敏史" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="高血压" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="胃溃疡" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="伤残" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="焦虑" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="抑郁" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="紫癜" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="肝炎" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="血友病" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="肺结核" class="mr-4" />
              <up-checkbox active-color="#00E0AE" label="其他严重疾病或手术" />
            </up-checkbox-group>
          </up-form-item>
          <up-form-item ref="item1" label="" label-position="top" :border-bottom="true" prop="name" class="no-padding">
            <up-textarea placeholder="请简单描述其他严重疾病或手术" border="none" class="textarea-no-px" />
          </up-form-item>
          <up-form-item ref="item1" required label="户籍详细地址" prop="name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否适合参加体育活动
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="目前情况" label-position="top" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                目前情况
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-textarea placeholder="请简单描述目前情况" border="none" class="textarea-no-px" />
          </up-form-item>
          <up-form-item ref="item1" label="备注" label-position="top" prop="name" :border-bottom="true">
            <up-textarea placeholder="请输入备注信息" border="none" class="textarea-no-px" />
          </up-form-item>
          <up-form-item ref="item1" required label="诊断证明或就诊病例" label-position="top" :border-bottom="false">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                诊断证明或就诊病例
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-upload
              class="my-2"
              :file-list="fileList1"
              name="1"
              multiple
              :max-count="1"
            >
              <view class="upload-file w-full p-4">
                <view class="text-center">
                  <view class="flex items-center justify-center">
                    <up-icon name="camera-fill" size="40" color="#C5C9D1" />
                  </view>
                  <view class="w-full text-#C5C9D1">
                    上传证明
                  </view>
                </view>
              </view>
            </up-upload>
          </up-form-item>
        </up-form>
      </view>
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />就诊医院情况说明
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 py-4">
        <view class="indent-7 line-height-6">
          学生需紧急送医时，是否有指定医院？如有，指定医院为<up-input class="inline-input" type="text" placeholder="请输入医院名称" /> (空白视为无指定医院)，如未指定特殊医院，为在紧急情况下争取抢救时间，由<text class="text-#3AA69B font-bold">
            急救中心决定送诊医院
          </text>。
        </view>
      </view>
      <view class="mx-8 mb-2">
        <u-row gutter="16" class="mx-8 mb-2">
          <u-col span="6">
            <u-button
              size="default"
              shape="circle"
              class="white-button mb-6 mt-6"
              @click="preHandle"
            >
              <text class="text-base text-[#02CAB1]">
                上一步
              </text>
            </u-button>
          </u-col>
          <u-col span="6">
            <u-button
              size="default"
              shape="circle"
              class="gradient-button mb-6 mt-6"
              @click="nextHandle"
            >
              <text class="text-base text-white">
                下一步
              </text>
            </u-button>
          </u-col>
        </u-row>
      </view>
    </view>
    <!-- 用户服务协议与隐私政策 -->
    <DescriptionPopup ref="descriptionPopup" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import DescriptionPopup from './description-popup.vue';

// 响应式表单数据
const dataForm = ref({
  name: '',
  birthday: '',
});

// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
};
// 用户服务协议与隐私政策
const descriptionPopup = ref();
const popupHandle = () => {
  descriptionPopup.value.init();
};

const preHandle = () => {
  uni.redirectTo({
    url: '/pages/biz/health/index',
  });
};
const nextHandle = () => {
  uni.redirectTo({
    url: '/pages/biz/health/receipt',
  });
};
</script>

<style lang="scss" scoped>
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}

:deep(.uni-input-input){
  text-align: right;
}
:deep(.uni-input-placeholder ){
  text-align: right;
}
:deep(.uni-textarea-textarea){
  color: #000000;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}

:deep(.u-checkbox__icon-wrap--square){
  border-radius: 5px !important;
}
.inline-input{
  display: inline-block;
  border-width: 0px !important;
  border-bottom: 1px solid #e0e7ec !important;
  border-radius: 0px;
  padding: 0px !important;
}
:deep(.inline-input .uni-input-input){
  text-align: left;
  color: #3aa69b;
}
:deep(.inline-input .uni-input-placeholder){
  text-align: left;
}
:deep(.no-padding .u-form-item__body){
  padding: 0px;
}
</style>
